<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="住院手术治疗" name="first">
      <div  id="xl">
        <!--表头结束-->
        <!--table开始-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/s' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>手术管理</el-breadcrumb-item>
          <el-breadcrumb-item>手术治疗</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
          <!--表头-->
          <el-row>
            <el-col :span="4">
              <el-input placeholder="请输入审批单号" v-model="eaaOrderNumber"  ></el-input>
            </el-col>
            <el-button  icon="el-icon-search" type="primary" @click="initData2(currPage,pageSize,eaaOrderNumber)"></el-button>
            <!--打印导入导出-->
          </el-row>
          <el-table

              stripe
              style="width: 100%"
              :data="tableData1.slice((currentPage-1)*pageSize,currentPage*pageSize)">
            <el-table-column
                prop="operationId"
                label="手术号">
            </el-table-column>
            <el-table-column
                prop="surgeryArrange.surgeryFor.recipe.tyhRecipeEntity.tyhPatientEntity.patientName"
                label="病人姓名">
            </el-table-column>
            <el-table-column
                prop="operationName"
                label="手术名称">
            </el-table-column>
            <el-table-column
                prop="operationTime"
                :formatter="dateformat"
                label="手术开始时间">
            </el-table-column>
            <el-table-column
                prop="operationEndTime"
                :formatter="dateformat"
                label="手术结束时间">
            </el-table-column>
            <el-table-column
                prop="operationDoctor"
                label="主刀医生">
            </el-table-column>
            <el-table-column
                prop="operationNurse"
                label="负责护士">
            </el-table-column>
            <el-table-column  label="操作" width="130px">
              <template  #default="scope">
                <template v-if="scope.row.operationEndTime==null">
                  <el-tooltip content="手术结束" placement="top">
                    <el-button
                        icon="el-icon-delete" size="mini"
                        @click="updateOperation(scope.row.operationId)"></el-button>
                  </el-tooltip>
                </template>

                <template v-if="scope.row.operationEndTime!=null">
                  <el-tooltip content="已就诊" placement="top">
                    <el-button
                        icon="el-icon-star-on" size="mini"></el-button>
                  </el-tooltip>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <br>
          <!--分页-->
          <div class="fy_div">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
          </div>
        </el-card>
      </div>
    </el-tab-pane>

    <el-tab-pane label="门诊手术治疗" name="second">
      <!--表头结束-->
      <!--table开始-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/s' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>手术管理</el-breadcrumb-item>
        <el-breadcrumb-item>手术治疗</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <!--表头-->
        <el-row>
          <el-col :span="4">
            <el-input placeholder="请输入审批单号" v-model="eaaOrderNumber"  ></el-input>
          </el-col>
          <el-button  icon="el-icon-search" type="primary" @click="initData2(currPage,pageSize,eaaOrderNumber)"></el-button>
          <!--打印导入导出-->
        </el-row>
        <el-table

            stripe
            style="width: 100%"
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
          <el-table-column
              prop="operationId"
              label="手术号">
          </el-table-column>
          <el-table-column
              prop="surgeryArrange.surgeryFor.prescription.registration.patient.patientDataName"
              label="病人姓名">
          </el-table-column>
          <el-table-column
              prop="operationName"
              label="手术名称">
          </el-table-column>
          <el-table-column
              prop="operationTime"
              :formatter="dateformat"
              label="手术开始时间">
          </el-table-column>
          <el-table-column
              prop="operationEndTime"
              :formatter="dateformat"
              label="手术结束时间">
          </el-table-column>
          <el-table-column
              prop="operationDoctor"
              label="主刀医生">
          </el-table-column>
          <el-table-column
              prop="operationNurse"
              label="负责护士">
          </el-table-column>

          <el-table-column  label="操作" width="130px">
            <template  #default="scope">
              <template v-if="scope.row.operationEndTime==null">
                <el-tooltip content="手术结束" placement="top">
                  <el-button
                      icon="el-icon-delete" size="mini"
                      @click="updateOperation(scope.row.operationId)"></el-button>
                </el-tooltip>
              </template>

              <template v-if="scope.row.operationEndTime!=null">
                <el-tooltip content="已结束" placement="top">
                  <el-button
                      icon="el-icon-star-on" size="mini"></el-button>
                </el-tooltip>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <!--分页-->
        <div class="fy_div">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length">
          </el-pagination>
        </div>
      </el-card>
    </el-tab-pane>

  </el-tabs>




</template>

<script>
import qs from "qs";
import moment from "moment";
import http,{service} from "@/http/request";
export default {
  name: "operationManager",
  components: {},


  data() {
    return {
      tableData:[],
      tableData1:[],
      dialogVisible: false,
      currentPage:1, //初始页
      pageSize:10,    //    每页的数据
      activeName: 'first',
    }
  },
  methods:{
    dateformat(row , column){
      const data = row[column.property]
      if (data == undefined){
        return
      }
      return moment(data).format("yyyy-MM-DD HH:mm:ss")
    },
    initData(){
      service("http://localhost:8088/find_operation")
          .then((v) => {
            this.tableData = v.data;
          })
    },

    initData1(){
      service("http://localhost:8088/find_operation_recipe")
          .then((v) => {
            this.tableData1 = v.data;
          })
    },

    updateOperation(operationId){
      service("http://localhost:8088/update_operation",{params:{operationId:operationId}})
          .then((v) => {
            this.$message('操作成功！');
            this.initData(this.currentPage, this.pageSize);
            this.initData1(this.currentPage, this.pageSize);
          })
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pageSize = size;
      console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },

    ClearFrom(){
      this.ruleForm='';
      this.dialogVisible=false;
    },
    pageChange(p) {
      this.initData(p, this.pageSize)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  },
  created() {
    this.initData();
    this.initData1();

  },
}
</script>

<style scoped>
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}

.el-card{
  margin-top: 50px;

}
.block{
  margin-left: 350px;
}
.fy_div{
  margin-top:20px;
  margin-left: 450px;
}
</style>
